const lib = ao2.lib
import Button from "components/items/button";
import btTable from "components/bt_table";
import Table from "components/list/table";
import { btTableDoc } from "../document";

var data=[
  {
    "name":"状态",
    "orderBy":1,
    "description":null,
    "id":"297ea48b661ed59101661f8eaf150004",
    "code":"ZT",
    "zid":""
  },
  {
    "name":"服务区域",
    "orderBy":1,
    "description":null,
    "id":"402881a0670bff6401670c160b46007a",
    "code":"FWQY",
    "zid":""
  },
  {
    "name":"基本设置",
    "orderBy":1,
    "description":"基本设置模块",
    "id":"402882ae70ec9c190170eca02c94000b",
    "code":"Base",
    "zid":""
  },
  {
    "name":"生产资料建模",
    "orderBy":5,
    "description":"生产资料建模中的字典",
    "id":"402882ae7134e86b017135256c7000a7",
    "code":"FactoryData",
    "zid":""
  },
  {
    "name":"项目管理设置",
    "orderBy":6,
    "description":null,
    "id":"402882ae715ec26801715ee5428f0015",
    "code":"ProjctManger",
    "zid":""
  },
  {
    "name":"通用状态",
    "orderBy":0,
    "description":null,
    "id":"297ea48b66187b6a01661892133f0001",
    "code":"CommDataStatus",
    "zid":"297ea48b661ed59101661f8eaf150004"
  },
  {
    "name":"单据状态",
    "orderBy":0,
    "description":null,
    "id":"402881e06699ee6801669a8cec940007",
    "code":"OrderStatus",
    "zid":"297ea48b661ed59101661f8eaf150004"
  },
  {
    "name":"确认状态",
    "orderBy":0,
    "description":null,
    "id":"402881e066be9a7e0166be9f35ec0002",
    "code":"ConfirmStatus",
    "zid":"297ea48b661ed59101661f8eaf150004"
  },
  {
    "name":"费用标识",
    "orderBy":0,
    "description":null,
    "id":"402881e066be9a7e0166be9f7e110003",
    "code":"FeeSign",
    "zid":"297ea48b661ed59101661f8eaf150004"
  },
  {
    "name":"城市级别",
    "orderBy":0,
    "description":null,
    "id":"297ea48b661ed59101661f914a330007",
    "code":"CityLevel",
    "zid":"297ea48b661ed59101661f8eaf150004"
  },
  {
    "name":"区域状态",
    "orderBy":1,
    "description":null,
    "id":"297ea48b661ed59101661f95615f000e",
    "code":"status",
    "zid":"297ea48b661ed59101661f8eaf150004"
  },
  {
    "name":"单据类型",
    "orderBy":1,
    "description":null,
    "id":"4028f0816680f302016680fb2bc50001",
    "code":"OrderType",
    "zid":"297ea48b661ed59101661f8eaf150004"
  },
  {
    "name":"送货车型",
    "orderBy":0,
    "description":null,
    "id":"402881a0670bff6401670c166fa6007e",
    "code":"zlinterval",
    "zid":"402881a0670bff6401670c160b46007a"
  }
]

const btTableDc = Table({
  tableClass: 'wid-p100',
  ...btTableDoc
})

/**
 * 以下是表格里的数据，参数、及方法
 *
 */
function actionFormatter(value, row, index) {
  return [
    '<a class="ss-link-primary ss-block edit" href="javascript:void(0)" title="Edit">修改</a>',
    '<a class="ss-link-primary ss-block remove" href="javascript:void(0)" title="Remove">删除</a>'
  ].join('');
}
let actionEvents = {
  'click .edit': function (e, value, row, index) {
    var randomId = 100 + ~~(Math.random() * 100)
    inst.btTable.bootstrapTable('updateRow', {
      index: index,
      row: {
        id: randomId,
        name: 'Item ' + randomId,
        price: '$' + randomId
      }
    })
  },
  'click .remove': function (e, value, row, index) {
    const ids = row.id        //需要字符串
    inst.btTable.bootstrapTable('remove', {
      field: 'id',
      values: ids
    })
  }
};


const inst = btTable({
  type: 'treegrid',
  options: {
    toolbar: '#toolbar',//工具栏
    columns: [
      {
          checkbox: true,
          field: 'state',
          align: 'center',
          width: 50,
          valign: 'middle'
      },
      {
          field: 'name',
          title: '名称',
          // visible: false,
          valign: 'middle'
      },
      {
          field: 'id',
          title: 'id',
          valign: 'middle',
          // sortable: true,
          // editable: true
      },
      {
          field: 'Desc',
          title: '操作',
          align: 'right',
          valign: 'middle',
          width: 140,
          events: actionEvents,
          formatter: actionFormatter,
      }
    ],
    data: data,
    clickToSelct: true,
    singleSelect: true,
    //在哪一列展开树形
    treeShowField: 'name',
    //指定父id列
    parentIdField: 'zid',
    onPostBody: function () {
      setTimeout(() => {
        const $table = inst.btTable
        var columns = $table.bootstrapTable('getOptions').columns;
        //debugger
        if (columns && columns[0][1].visible) {
          $table.treegrid({
            initialState: 'collapsed',// 所有节点都折叠
            treeColumn: 1,
            expanderExpandedClass: 'icon-arrow_down',  // 展开时，图标样式
            expanderCollapsedClass: 'icon-arrow_up', // 折叠时，图标样式
            onChange: function () {
                $table.bootstrapTable('resetView'); // 重置表格宽高
            }
          });
        }
      }, 10);

    },
    loadingTemplate: function () {
      return '<i class="icon-loading"></i>'
    },
  }
})

function template(state, props) {
  //方式二
  return (
    <>
      <View className="pages-title-lg">boostrap Table</View>
      <View className='demo-grid demo-bootsrtap' style={{width: '100%'}}>
        <View id='toolbar' className='row-flex'>
          <Button  title='新增' itemClass='btn-default' tap={this['onAdd']} />
          <Button  title='ShowLoad' itemClass='btn-default ml-default' tap={this['showload']} />
          <Button  title='HideLoad' itemClass='btn-default ml-default' tap={this['hideload']} />
        </View>
        <inst.UI />
      </View>
      <View className="pages-title-sm">Attributes</View>
      {btTableDc.render()}
    </>
  )
}

export default function(Pager) {
  return Pager({
    template,
    data: {
      tipsList: []
    },
    pageClass: 'xx',
    onAdd() {
      const x = lib.uniqueId('id')
      inst.btTable.bootstrapTable('append', {
        id: x,
        name: 'SAUI ' +x,
        price: '$99999'
      })

    },
    showload() {
      inst.btTable.bootstrapTable('showLoading')
    },
    hideload() {
      inst.btTable.bootstrapTable('hideLoading')
    }
  })
}